<template>
    <div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import GeoJSON from 'ol/format/GeoJSON'
import Map from 'ol/Map'
import View from 'ol/View'
import {Fill, Style} from 'ol/style'
import {OSM, Stamen, Vector as VectorSource} from 'ol/source'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import {fromLonLat} from 'ol/proj'
import {getVectorContext} from 'ol/render'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const background = new TileLayer({
        className: 'stamen',
        source: new Stamen({
          layer: 'toner'
        })
      })

      const base = new TileLayer({
        source: new OSM()
      })

      const clipLayer = new VectorLayer({
        style: null,
        source: new VectorSource({
          url: 'zlocal/data/geojson/switzerland.geojson',
          format: new GeoJSON()
        })
      })

      // Giving the clipped layer an extent is necessary to avoid rendering when the feature is outside the viewport
      clipLayer.getSource().on('addfeature', function () {
        base.setExtent(clipLayer.getSource().getExtent())
      })

      const style = new Style({
        fill: new Fill({
          color: 'black'
        })
      })

      base.on('postrender', function (e) {
        const vectorContext = getVectorContext(e)
        e.context.globalCompositeOperation = 'destination-in'
        clipLayer.getSource().forEachFeature(function (feature) {
          vectorContext.drawFeature(feature, style)
        })
        e.context.globalCompositeOperation = 'source-over'
      })

      // eslint-disable-next-line
      const map = new Map({
        layers: [background, base, clipLayer],
        target: 'map',
        view: new View({
          center: fromLonLat([8.23, 46.86]),
          zoom: 7
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
